<template>
	<view class="see-all">
		<view class="header">
			<uniNavBar
				leftImg="/static/h5img/return_black@2x.png"
				@clickLeft="clickLeft"
				@clickRight="clickRight"
				rightImg="/static/h5img/search_black@2x.png"
				title="订单明细"
			></uniNavBar>
			<view class="navs">
				<view :class="{ active: current == i }" v-for="(item, i) in navs" @click="navsHandleClick(i)" :key="`tab-${i}`">{{ item.lable }}</view>
			</view>
		</view>
		<view class="uni-tab-bar">
			<view class="goods-list">
				<view v-if="current === 0">
					<view class="all-list">
						<view class="list-item" v-for="(item, i) in allData" :key="`all-${i}`">
							<view class="order-top">
								<view class="order-num">
									订单号:1908730042846477809
									<image @click="copyOrderNum('1908730042846477809')" class="copy-btn" src="/static/h5img/copy_btn@2x.png"></image>
								</view>
								<text class="order-status">处理中</text>
							</view>
							<view class="content-item">
								<image src="" class="content-item-img"></image>
								<view class="content-text">
									<view class="item-name">Maxigenes美可卓全脂高钙奶粉1kg</view>
									<view class="rmb">
										<text>
											<text class="unit-price">¥ 124.00</text>
											<text class="content-count">×1</text>
										</text>
										<text class="after-class">售后成功</text>
									</view>
								</view>
							</view>
							<view class="estimate">
								<text class="estimate-count">共2件</text>
								<view class="estimate-detail">
									<view class="jfsy">
										积分收益:
										<view class="p-rmb">
											<image class="jf-img" src="/static/h5img/jf_icon@2x.png"></image>
											1250
										</view>
									</view>
									<view class="ljsy">
										累计收益:
										<text class="integral">¥ 1250.00</text>
									</view>
								</view>
							</view>
							<view class="place-msg">
								<text>下单人: 张*三 123****0111</text>
								<view class="order-rmb">
									订单总额:
									<image class="place-jf" src="/static/h5img/jf_icon@2x.png"></image>
									<text class="place-rmb">
										<text class="xm-rmb">1250</text>
										+ ¥ 248.00
									</text>
								</view>
							</view>
						</view>
					</view>
				</view>
				<view v-if="current === 1">待付款</view>
				<view v-if="current === 2">待发货</view>
				<view v-if="current === 3">待收货</view>
				<view v-if="current === 4">退款售后</view>
			</view>
		</view>
	</view>
</template>

<script>
import uniNavBar from '@/components/uni-nav-bar/uni-nav-bar.vue';
export default {
	components: {
		uniNavBar
	},
	data() {
		return {
			navs: [{ lable: '全部' }, { lable: '代付款' }, { lable: '待发货' }, { lable: '待收货' }, { lable: '退款售后' }],
			current: 0,
			allData: [{ text: 'vf' }, { text: 'fth' }, { text: 'fth' }]
		};
	},
	methods: {
		clickRight() {
			// 跳转查看明细
		},
		clickLeft() {
			uni.navigateBack();
		},
		navsHandleClick(i) {
			console.log(i);
			this.current = i;
		},
		// 复制到剪切板
		copyOrderNum(num) {
			console.log(num);
		}
	},
	onLoad() {
		const status = ifLogin()
	}
};
</script>

<style scoped lang="scss">
body,
uni-page-body {
	background-color: #f7f7f7;
}
.see-all {
	background-color: #f7f7f7;
}
.header {
	position: absolute;
	width: 100%;
	background-color: #fff;
}
.uni-tab-bar {
	position: absolute;
	top: 168rpx;
	overflow: hidden;
	width: 100%;
	height: calc(100% - 168rpx);
	.goods-list {
		overflow: auto;
		height: 100%;
		padding-bottom: 40rpx;
	}
}
.navs {
	width: 100%;
	height: 80rpx;
	display: flex;
	align-items: center;
	justify-content: space-around;
	transition: 0.3s;
	> uni-view {
		line-height: 76rpx;
		height: 76rpx;
	}
	.active {
		border-bottom: 4rpx solid #dbc191;
		color: #dbc191;
	}
}
.list {
	height: calc(100% - 168rpx);
}
.all-list {
	padding: 0;
	.list-item {
		margin-top: 20rpx;
		background-color: #fff;
		padding: 0 30rpx;
		.order-top {
			display: flex;
			justify-content: space-between;
			border-bottom: 1rpx solid #ededed;
			padding-bottom: 24rpx;
			padding-top: 26rpx;
			.order-num {
				font-family: PingFang-SC-Bold;
				color: #333;
				font-size: 25rpx;
				line-height: 25rpx;
				.copy-btn {
					height: 28rpx;
					width: 29rpx;
					margin-left: 23rpx;
					font-size: 25rpx;
					line-height: 25rpx;
				}
			}
			.order-status {
				color: #dbc191;
				font-family: PingFang-SC-Medium;
			}
		}
		.content-item {
			display: flex;
			border-bottom: 1rpx solid #ededed;
			padding: 18rpx 0 27rpx 0;
			.content-item-img {
				width: 136rpx;
				height: 136rpx;
				background: #f3f3f3;
			}
			.content-text {
				flex: 1;
				padding-left: 22rpx;
				color: #333;
				font-size: 26rpx;
				font-family: PingFang-SC-Medium;
				.item-name {
					white-space: nowrap;
					overflow: hidden;
					text-overflow: ellipsis;
					line-height: 32rpx;
					font-size: 26rpx;
					margin-top: 9rpx;
				}
				.rmb {
					margin-top: 73rpx;
					line-height: 23rpx;
					display: flex;
					justify-content: space-between;
					.after-class {
						font-size: 24rpx;
						color: #999;
					}
					.unit-price {
						font-family: DINCond-Bold;
						font-size: 30rpx;
					}
					.content-count {
						color: #999;
					}
				}
			}
		}
		.estimate {
			display: flex;
			font-family: PingFang-SC-Medium;
			font-size: 24rpx;
			justify-content: space-between;
			padding: 31rpx 0;
			border-bottom: 1rpx solid #ededed;
			color: #333;
			line-height: 23rpx;
			.estimate-detail {
				text-align: right;
				.jfsy,
				.ljsy {
					line-height: 23rpx;
					font-size: 24rpx;
					.p-rmb,
					.integral {
						font-size: 30rpx;
						font-family: DINCond-Bold;
						line-height: 23rpx;
					}
					.p-rmb {
						color: #dbc291;
						display: inline;
						.jf-img {
							width: 20rpx;
							height: 24rpx;
							margin-right: 10rpx;
							margin-left: 18rpx;
						}
					}
					.integral {
						color: #333;
						margin-left: 11rpx;
					}
				}
				.ljsy {
					margin-top: 26rpx;
				}
			}
		}
		.place-msg {
			display: flex;
			justify-content: space-between;
			padding: 30rpx 0;
			font-size: 24rpx;
			color: #333;
			line-height: 24rpx;
			.place-jf {
				margin-left: 13rpx;
				width: 20rpx;
				height: 24rpx;
				margin-right: 10rpx;
			}
			.place-rmb {
				color: #e93246;
				font-size: 30rpx;
				height: 22rpx;
				font-size: 30rpx;
				font-family: DINCond-Bold;
				.xm-rmb {
					color: #dbc291;
					margin-right: 8rpx;
				}
			}
			.order-rmb {
				font-size: 24rpx;
				line-height: 24rpx;
			}
		}
	}
}
</style>
